/**
* @file 积分兑换
* @author 张超
* @created 2023/7/05 08:00
* @updated 2023/7/05 18:00
*/
<template>
	<view class="convert">
		<u-navbar :border-bottom="false" title-size="35" title="兑换"></u-navbar>
		<view class="convert-input">
			<view>
				<text>兑换数量</text>
				<input type="text" placeholder="请输入兑换数量" v-model="number">
			</view>
			<view v-if="typee==1">注：健康值只能单项兑换消费积分</view>
			<view v-if="typee==2">注：积分需满足≥200且是200的倍数</view>
		</view>
		<!-- btn() -->
		<view class="convert-btn" @click="tiaj">确认兑换</view>
		<u-popup v-model="show" width="560" height="400" mode="center" border-radius="20">
			<view class="pop">
				<view class="pop-title" @click="btn">
					<text>填写验证码</text>
					<u-icon name="close" size="20"></u-icon>
				</view>
				<text class="pop-code">验证码已发送至{{info.mobile | phone}}</text>
				<view class="pop-facode">
					<input type="text" placeholder="填写验证码" v-model="code">
					<view class="" @click="daoji()">{{sendText}}</view>
				</view>
				<view class="pop-btn" @click="duih">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		priceChange,
		signCheck
	} from '@/network/api.js'
	import {
		sendVerificationCode,
		phoneVerificationCode,
		getUserinfo
	} from '@/network/loginAndMy.js'
	import {
		throttle
	} from '@/mock/throttle.js'

	export default {
		data() {
			return {
				// 弹框
				show: false,
				NewPhone: '19907149283',
				// 验证码变量 start
				countDown: 60,
				disSendSms: false,
				sendText: '发送验证码',
				// 验证码变量 end
				// 兑换数量
				number: "",
				// 验证码
				code: '',
				// 个人信息
				info: {},
				// 判断兑换健康积分/消费积分，health健康积分，pay消费积分
				type: 'pay',
				// 判断是否显示注释,1我的页面跳转而来，2签到页面跳转而来
				typee: '',
				score: '',
				health: ''
			}
		},
		onLoad(option) {
			this.getUserinfoRe()
			let data = JSON.parse(option.data)
			if (data.type != '') {
				this.type = data.type
				this.typee = data.typee
				if (this.typee == 2) {
					this.signCheckRe()
				}

			}
		},
		filters: {
			phone(val) {
				if (val != null) {
					// 使用正则表达式匹配手机号的前7位数字
					var regex = /^(\d{3})\d{4}(\d{4})$/;
					return val.replace(regex, "$1****$2")
				}
			}
		},
		methods: {
			// 弹框
			btn() {
				if (this.typee == 2) {
					// 判断个人签到积分是否满足
					if (!(Number(this.number) <= Number(this.score))) {
						uni.showToast({
							title: "个人签到积分不足",
							icon: "none",
							duration: 2000,
						});
					} else if (!Number(this.score) > 200) {
						uni.showToast({
							title: "不满足兑换条件",
							icon: "none",
							duration: 2000,
						});
					} else if (!(Number(this.number) % 200 == 0)) {
						uni.showToast({
							title: "不满足兑换比例",
							icon: "none",
							duration: 2000,
						});
					} else {
						this.show = !this.show
					}
				} else {
					// 判断个人签到积分是否满足
					if (!(Number(this.number) <= Number(this.health))) {
						uni.showToast({
							title: "个人健康值不足",
							icon: "none",
							duration: 2000,
						});
					} else {
						this.show = !this.show
					}
				}

			},
			// 获取用户信息
			getUserinfoRe() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.health = res.data.health
						// console.log(this.user_info.ispass,'入金')
					}
				})
			},
			signCheckRe() {
				signCheck().then(res => {
					this.score = res.data.score
				})
			},
			// 获取验证码点击事件
			daoji() {
				let refPhone =
					/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
				if (!refPhone.test(this.NewPhone)) {
					uni.showToast({
						title: "手机号错误",
						icon: "none",
						duration: 2000,
					});
				} else if (this.countDown < 60) {
					uni.showToast({
						title: '请勿重复发送',
						icon: "none",
						duration: 2000,
					});
				} else {
					this.codeRe()
					this.countDown -= 1;
					this.sendText = this.countDown + "秒后重试";
					let timerId = setInterval(() => {
						this.countDown -= 1;
						this.sendText = this.countDown + "秒后重试";
						if (this.countDown <= 0) {
							clearInterval(timerId);
							this.sendText = "发送验证码";
							this.countDown = 60;
						}
					}, 1000)
				}
			},
			// 发送验证码
			codeRe() {
				let data = {
					userphone: this.info.mobile
				}
				sendVerificationCode(data).then(res => {})
			},
			// 兑换
			duih() {
				if (this.code == '') {
					uni.showToast({
						title: "请填写验证码",
						icon: "none",
						duration: 2000,
					});
				} else {
					let data = {
						mobile: this.info.mobile,
						captcha: this.code
					}
					// 验证输入的验证码
					phoneVerificationCode(data).then(res => {
						if (res.code == 1) {
							this.tiaj()
						}
					})
				}
			},
			tiaj: throttle(function() {
				let data = {
					score: this.number,
					type: this.type
				}
				console.log(data, '提交兑换')
				// 提交
				priceChange(data).then(res => {
					if (res.code == 1) {
						this.show = false
						uni.showToast({
							title: "兑换成功",
							icon: "none",
							duration: 2000,
						});
						this.number = 0
					}
				})
			}, 3000),
			// 提交兑换
			// tiaj() {

			// }
		}
	}
</script>

<style lang="scss">
	.convert {
		height: 100vh;
		background-color: #F3F3F3;

		.convert-input {
			margin-top: 30rpx;
			background-color: #fff;

			>view:nth-child(1) {
				display: flex;
				align-items: center;
				padding: 40rpx 30rpx;
				border-bottom: 1rpx solid #F2F2F2;

				>text {
					font-size: 16px;
					font-family: PingFang SC, PingFang SC-Medium;
				}

				>input {
					margin-left: 20rpx;
				}
			}

			>view:nth-child(2) {
				font-size: 24rpx;
				color: #999999;
				padding: 40rpx 30rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}
		}

		.convert-btn {
			width: 690rpx;
			height: 90rpx;
			margin: 180rpx auto;
			text-align: center;
			line-height: 90rpx;
			font-size: 18px;
			color: #fff;
			font-family: PingFang SC, PingFang SC-Medium;
			background: linear-gradient(to right, #B07412, #E3BA5B);
			border-radius: 4px;
		}

		.convert-btn:active {
			background: linear-gradient(to right, #E3BA5B, #B07412);
		}

		// 弹框
		.pop {
			padding: 55rpx 40rpx 35rpx 40rpx;

			.pop-title {
				display: flex;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Bold;

				>text {
					display: block;
					margin: 0 auto;
					margin-right: 0rpx;
				}

				.u-icon {
					margin-left: auto;
				}
			}

			.pop-code {
				display: block;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				color: #999999;
			}

			.pop-facode {
				display: flex;
				margin: 45rpx 0;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #DCDCDC;

				>view {
					width: 160rpx;
					font-size: 28rpx;
				}
			}

			.pop-btn {
				width: 290rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				margin: 0 auto;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				color: #ffffff;
				background: linear-gradient(to right, #B07412, #E3BA5B);
				border-radius: 10rpx;
			}

			.pop-btn:active {
				background: linear-gradient(to right, #E3BA5B, #B07412);
			}
		}
	}
</style>